<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="客户阶段" prop="stageCode">
        <el-select 
          v-model="formData.stageCode" 
          placeholder="请选择..."
          class="w-full"
        >
          <el-option 
            v-for="item in localStageOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="联系人" prop="contacts">
        <el-input 
          v-model="formData.contacts" 
          placeholder="请输入" 
        />
      </el-form-item>
      
      <el-form-item label="跟进主题" prop="subject">
        <el-input 
          v-model="formData.subject" 
          placeholder="请输入" 
        />
      </el-form-item>
      
      <el-form-item label="跟进详情" prop="detail">
        <el-input 
          v-model="formData.detail" 
          type="textarea" 
          :rows="4" 
          placeholder="请输入" 
        />
      </el-form-item>
      
      <el-form-item label="备注">
        <el-input 
          v-model="formData.remark" 
          type="textarea" 
          :rows="2" 
          placeholder="请输入" 
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, onMounted } from 'vue'
import { CustFollowApi } from '@/api/customermanager/custfollow'

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')

const formData = ref({
  custId: 0,
  stageCode: '',
  contacts: '',
  subject: '',
  detail: '',
  remark: ''
})

// 客户阶段选项（与主页面一致）
// const stageOptions = ref([
//   { value: 'new_inquiry', label: '新询盘' },
//   { value: 'contacted', label: '已联系' },
//   { value: 'quoted', label: '已报价' },
//   { value: 'negotiation', label: '谈判中' },
//   { value: 'closed', label: '已关闭' }
// ])

// // 定义 props 来接收 stageOptions
// const props = defineProps({
//   stageOptions: {
//     type: Array,
//     default: () => []
//   }
// })

// 客户阶段选项（从父组件传入）
const localStageOptions = ref<Array<{value: string, label: string}>>([])

// 表单验证规则
const formRules = reactive({
  stageCode: [{ required: true, message: '请选择客户阶段', trigger: 'change' }],
  contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  subject: [{ required: true, message: '请输入跟进主题', trigger: 'blur' }],
  detail: [{ required: true, message: '请输入跟进详情', trigger: 'blur' }]
})

// 打开弹窗
const open = async (
  type: string, 
  id: number | null, 
  custId: number,
  stages: Array<{value: string, label: string}> = []) => {
  dialogVisible.value = true
  dialogTitle.value = t(type === 'create' ? '新增跟进记录' : '编辑跟进记录')
  formType.value = type
  resetForm()

  // 更新 stageOptions
  localStageOptions.value = stages
  
  // 设置客户ID
  formData.value.custId = custId
  
  // 如果是编辑，加载数据
  if (id) {
    formLoading.value = true
    try {
      const data = await CustFollowApi.getCustFollow(id)
      formData.value = { ...data }
    } finally {
      formLoading.value = false
    }
  }
}

// 重置表单
const resetForm = () => {
  formData.value = {
    custId: 0,
    stageCode: '',
    contacts: '',
    subject: '',
    detail: '',
    remark: ''
  }
}

// 提交表单
const formRef = ref()
const emit = defineEmits(['success'])
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    formLoading.value = true
    
    if (formType.value === 'create') {
      await CustFollowApi.createCustFollow(formData.value)
      message.success(t('common.createSuccess'))
    } else {
      await CustFollowApi.updateCustFollow(formData.value)
      message.success(t('common.updateSuccess'))
    }
    
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>